<template>
  <bui-page-layout ref="pageLayout" :is-z-paging="true">
    <z-paging empty-view-text="暂无提现记录" :default-page-size="20" @onRefresh="onRefresh" ref="zpaging" @scroll="onScroll" :loading-more-enabled="false" v-model="dataList" :show-refresher-when-reload="true" @query="getList" :fixed="false">
      <view class="wp" ref="contentRef">
        <view class="financial-list" v-for="(rData,rIndex) in dataList" :key="rIndex">
          <view class="financial-hd">
            <view class="time">
              <text class="text" style="width: 127rpx;">{{ rData.month }}</text>
              <image src="/static/image/icon-arrow-bottom.png" @click="onCollapse(rIndex)" class="arrow" :class="{rotate: rData.unpack}"></image>
            </view>
            <text class="amount">收入: ¥{{rData.withdraw}}</text>
          </view>
          <view class="financial-collapse">
            <view class="nodata" v-if="!rData?.recordList.length">
              <text class="t">暂无数据</text>
            </view>
            <view class="financial-item" v-for="(item,index) in rData.recordList" :key="index">
              <view class="info">
                <view class="name"><text class="n">{{ item.remark }}</text></view>
                <view class="time"><text class="n">{{ item.createTime }}</text></view>
              </view>
              <view class="amount">
                <text class="p sub">{{(item.type===1?'+':'-')}}{{ item.amount }}</text>
                <text class="status" :class="{success: item.status_type===1,fail:item.status_type===2,under_review:item.status_type===3}">{{ item.status }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="loading" v-if="isLoading">
        <template v-if="!pageEnd">
          <u-loading-icon mode="circle" :size="24" color="#909399"></u-loading-icon>
        </template>
        <template v-else>
          <text class="t">没有更多数据</text>
        </template>
      </view>
    </z-paging>
  </bui-page-layout>
</template>
<script setup>
import { ref, reactive, onMounted, computed } from "vue";
var dataList = ref([]);
const contentRef = ref(null);
const isLoading = ref(false);
var zpaging = ref(null);
var pageNum = ref(1);
var pageEnd = ref(false);
var zpagingList = ref([]);
var sys = uni.$u.sys();
var innerHeight = sys.screenHeight - sys.safeAreaInsets.bottom;
onMounted(() => {
  console.log();
});
const getList = (pageNum, pageSize) => {
  var options = {
    limit: 20,
    // month: 11,
    page: pageNum.value,
  };
  uni.$request
    .service({
      url: "/m/withdraw/record",
      method: "POST",
      data: options,
      isLoading: true,
    })
    .then((res) => {
      zpagingList.value = res;
      dataList.value = appendRecordListsEfficient(
        dataList.value,
        zpagingList.value
      );
      if (!res.length) {
        pageEnd.value = true;
      }
      zpaging.value.complete(dataList.value);
      setTimeout(() => {
        isLoading.value = contentRef.value.$el.offsetHeight >= innerHeight;
      }, 10);
    })
    .catch((error) => {
      uni.$u.toast(error.message);
    });
};

const onScroll = (e) => {
  if (
    innerHeight + e.detail.scrollTop >= e.detail.scrollHeight &&
    !pageEnd.value
  ) {
    pageNum.value++;
    getList();
    console.log("到达底部");
  }
};

const onRefresh = () => {
  pageNum.value = 1;
  pageEnd.value = false;
  dataList.value = [];
};
const appendRecordListsEfficient = (arr1, arr2) => {
  const mergeMap = new Map();

  arr1.forEach((item) => {
    mergeMap.set(item.month, {
      recordList: [...item.recordList],
      withdraw: item.withdraw,
    });
  });

  arr2.forEach((item) => {
    if (mergeMap.has(item.month)) {
      const existing = mergeMap.get(item.month);
      existing.recordList.push(...item.recordList);
      existing.withdraw = item.withdraw || existing.withdraw;
    } else {
      mergeMap.set(item.month, {
        recordList: [...item.recordList],
        withdraw: item.withdraw,
      });
    }
  });

  return Array.from(mergeMap, ([month, data]) => ({ month, ...data }));
};

const onCollapse = (index) => {
  dataList.value[index].unpack = !dataList.value[index].unpack;
};
</script>
<style lang="scss">
page {
  background-color: #f6f6f8;
}
.friend-info {
  padding: 20rpx 30rpx;
  .t {
    font-size: 28rpx;
    color: #9eb0c5;
  }
}
.financial-list {
  .financial-hd {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 34rpx 20rpx 40rpx;
    position: sticky;
    top: 0;
    background-color: #f6f6f8;
    .time {
      display: flex;
      align-items: center;
      .text {
        font-size: 30rpx;
        color: #232f3f;
      }
      .arrow {
        margin-left: 5rpx;
        width: 32rpx;
        height: 32rpx;
        transition: transform 0.3s;
      }
      .arrow.rotate {
        transform: rotate(180deg);
      }
    }
    .amount {
      font-size: 28rpx;
      color: #9eb0c5;
    }
  }
  .financial-item {
    display: flex;
    align-items: center;
    position: relative;
    padding: 14rpx 20rpx;
    background-color: #fff;
    &::after {
      content: "";
      display: block;
      position: absolute;
      left: 20rpx;
      right: 20rpx;
      height: 2rpx;
      background-color: #f3f3f3;
      top: 0;
    }
    .info {
      flex: 1;
      padding-left: 20rpx;
      .name {
        padding-top: 10rpx;
        .n {
          font-size: 28rpx;
          color: #232f3f;
          position: relative;
        }
      }
      .time {
        .n {
          font-size: 24rpx;
          color: #9eb0c5;
        }
      }
      .vip-icon {
        padding-top: 10rpx;
        .icon {
          width: 140rpx;
          height: 40rpx;
        }
      }
    }
    .amount {
      display: flex;
      flex-direction: column;
      margin-right: 14rpx;
      .p {
        font-size: 32rpx;
      }
      .p.add {
        color: #fe9900;
      }
      .p.sub {
        color: #232f3f;
      }
      .t {
        font-size: 24rpx;
        color: #9eb0c5;
        text-align: right;
      }
      .status {
        font-size: 24rpx;
        text-align: right;
        padding: 6rpx 0 0 0;
      }
      .status.success {
        color: #05c160;
      }
      .status.fail {
        color: #fc4d42;
      }
      .status.under_review {
        color: #fe9900;
      }
    }
  }
  .financial-item:first-child {
    &::after {
      display: none;
    }
  }
  .financial-collapse {
    transition: height 400ms ease-in-out 0ms;
    transform-origin: 50% 50% 0px;
    // height: 0px;
    overflow: hidden;
    .nodata {
      display: flex;
      height: 100rpx;
      justify-content: center;
      align-items: center;
      .t {
        font-size: 24rpx;
        color: #666;
      }
    }
  }
  .financial-collapse.show {
    height: 128px;
  }
}
</style>
